<template>
    <div>
        <Form :label-width="80" :model="code" :rules="ruleValidate" class="form" ref="code">
            <FormItem label="字典KEY" prop="codeKey">
                <Input class="ipt" placeholder="请输key" v-model="code.codeKey"/>
            </FormItem>
            <FormItem label="对应值" prop="codeValue">
                <Input class="ipt" placeholder="请输入key对应的值" type="textarea" v-model="code.codeValue"/>
            </FormItem>
            <FormItem label="说明" prop="content">
                <Input class="ipt" placeholder="描述" type="textarea" v-model="code.content"/>
            </FormItem>
            <FormItem>
                <Button @click="handleSubmit('code')" type="primary" v-has="this.$res.codeAdd">提交</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
    export default {
        name: "addCode",
        metaInfo: {
            title: '添加字典',
        },
        data() {
            return {
                code: {
                    codeKey: "",
                    codeValue: "",
                    content: "",
                },
                ruleValidate: {
                    codeKey: [
                        {required: true, message: '字典KEY不能为空', trigger: 'blur'}
                    ],
                    codeValue: [
                        {required: true, message: '字典值不能为空', trigger: 'blur'}
                    ],
                    content: [
                        {required: true, message: '字典描述不能为空', trigger: 'blur'}
                    ],
                },
                data: [],
            }
        },
        mounted: function () {
        },
        methods: {
            handleSubmit: function (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$kit.ajaxPost(this.$res.codeAdd, this.code, (res => {
                            this.$Message.success(res.data.msg)
                            this.$refs.code.resetFields()
                        }), this)
                    } else {
                        this.$Message.error("请认真填写字典信息")
                    }
                })
            }
        },

    }
</script>


<style scoped>
    .ipt {
        width: 500px;
    }

    .form {
        margin: 60px 0 10px 200px;
    }
</style>
